<template>
  <a-modal v-model:visible="visible" centered title="编辑商品" width="800px" @cancel="handleCancel">
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk" :disabled="isTrue">确定</a-button>
    </template>
    <div class="cropper">
      <vue-cropper
        ref="CropperRef"
        :img="fileTransfer"
        outputType="png"
        :info="true"
        :canScale="!isTrue"
        :canMove="!isTrue"
        :canMoveBox="!isTrue"
        :fixedBox="true"
        :autoCropWidth="cropSize[0]"
        :autoCropHeight="cropSize[1]"
        :maxImgSize="2048"
        :auto-crop="true"
        :fixed="true"
        :fixedNumber="fixedNumber"
        :high="false"
      />
    </div>
    <div class="flex mt-10 operate justify-center">
      <a-button :disabled="isTrue" @click="() => CropperRef?.changeScale(1)">
        <template #icon>
          <ZoomInOutlined />
        </template>
        放大
      </a-button>
      <a-button :disabled="isTrue" @click="() => CropperRef?.changeScale(-1)">
        <template #icon>
          <ZoomOutOutlined />
        </template>
        缩小
      </a-button>
      <a-button :disabled="isTrue" @click="() => CropperRef?.rotateRight()">
        <template #icon>
          <redo-outlined />
        </template>
        顺时针旋转90度
      </a-button>
      <a-button :disabled="isTrue" @click="() => CropperRef?.rotateLeft()">
        <template #icon>
          <undo-outlined />
        </template>
        逆时针旋转90度
      </a-button>
      <a-button @click="() => CropperRef?.refresh()">
        <template #icon>
          <sync-outlined />
        </template>
        重置
      </a-button>
    </div>
  </a-modal>
</template>

<script lang="ts" setup name="Cropper">
import { computed, ref } from 'vue'
import { useVModel } from '@vueuse/core'
import type { UploadFile } from 'ant-design-vue'
import { ZoomInOutlined, ZoomOutOutlined, RedoOutlined, UndoOutlined, SyncOutlined } from '@ant-design/icons-vue'
import { isFirstEnum } from '@/store/usePromotionStore'

interface Props {
  show: boolean
  file?: File | UploadFile
  fixedNumber: number[]
  cropSize: [number, number]
  isFirst: isFirstEnum
}

const isTrue = computed(() => {
  return props.isFirst === isFirstEnum.Other
})

interface Emits {
  (e: 'confirm', v: any): void
  (e: 'cancel'): void
  (e: 'update:show', v: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  show: false,
  fixedNumber: () => [3, 2],
  cropSize: () => [480, 320]
})
const emit = defineEmits<Emits>()

const fileTransfer = computed(() => {
  return props.file && URL.createObjectURL(props.file as File)
})

const visible = useVModel(props, 'show', emit)
const CropperRef = ref<any>()

function handleOk() {
  CropperRef.value.getCropBlob((data: any) => {
    emit('confirm', data)
  })
}

function handleCancel() {
  visible.value = false
}
</script>

<style lang="scss" scoped>
.cropper {
  width: 100%;
  height: 500px;
}

.operate {
  & > button {
    margin-left: 10px;

    &:first-child {
      margin-left: 0;
    }
  }
}
</style>
